<template>
  <div class="content">
    <!-- 已获得 -->
    <div class="gained">
      <div class="title">
        已获得奖章
      </div>
      <div class="list">
        <div class="listCon" v-for="(item, index) in list" :key="index">
          <img :src="'http://niu.icrobot.cn/'+item.colorMedal" alt="">
          <div class="medalName">{{item.medalName}}</div>
          <div class="jifen">
            <span>积分：</span>{{item.minSocre}}~{{item.maxSocre}} 积分
          </div>
        </div>
        <span class="haveNoData" v-if="list.length == 0">暂无奖章</span>
      </div>
      <div class="title" style="margin-top: 0.49rem;">
        未获得奖章
      </div>
      <div class="list">
        <div class="listCon" v-for="(item, index) in list1" :key="index">
          <img :src="'http://niu.icrobot.cn/'+item.grayMedal" alt="">
          <div class="medalName">{{item.medalName}}</div>
          <div class="jifen">
            <span>积分：</span>{{item.minSocre}}~{{item.maxSocre}} 积分
          </div>
        </div>
        <span class="haveNoData" v-if="list1.length == 0">暂无奖章</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      list1: [],
      points: ""
    };
  },
  mounted() {
    // 查询积分
    this.queryMyPoint();
    
    
  },
  methods: {
    queryMyPoint() {
      (
        async () => {
          const {data} = await this.get("/user/queryMyPoint",{
            userId: localStorage.getItem("id")
          });
          this.points = data.a;
          this.selectAllMedal();
        }
      )()
    },
    selectAllMedal() {
      (async () => {
        const { data } = await this.get("/medal/selectAllMedal");
        for (var i=0; i<data.length; i++) {
          if (this.points>=data[i].minSocre || this.points >= data[i].maxSocre) {
            this.list.push(data[i]);
          } else {
            this.list1.push(data[i]);
          }
        }
      })();
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  font-size: 0.1rem;
  padding: 0.24rem 0.26rem;
  box-sizing: border-box;
  .gained {
    .title {
      font-size: 0.28rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    .list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .listCon {
        width: 2.321rem;
        text-align: center;
        margin-top: 0.29rem;
        img {
          width: 1.51rem;
          height: 1.51rem;
        }
        .medalName {
          font-size: 0.22rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
        }
        .jifen {
          font-size: 0.18rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #787878;
        }
      }
      .haveNoData {
        width: 100%;
        text-align: center;
        margin-top: 0.8rem;
        font-size: 0.26rem;
        font-weight: bolder;
      }
    }
  }
}
</style>